<template>
  <div class="app-container">
    <Form
      :model="formState"
      autocomplete="off"
      :label-col="labelCol"
      :rules="rules"
      @finish="onSubmit"
    >
      <FormItem label="名称" name="name">
        <Input v-model:value="formState.name" allow-clear placeholder="名称" />
      </FormItem>
      <FormItem label="描述" name="remark">
        <Input v-model:value="formState.remark" allow-clear placeholder="描述" />
      </FormItem>

      <FormItem>
        <a-button type="primary" html-type="submit" :loading="btnLoading">提交</a-button>
      </FormItem>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Form, FormItem, Input } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { add } from '/@/api/sys/role'

  const emit = defineEmits(['onSuccess'])

  const labelCol = { style: { width: '80px' } }

  const rules: Record<string, Rule[]> = {
    name: [{ required: true, trigger: 'change', message: '名称不能为空' }],
  }

  const formState = ref({
    remark: '',
    name: '',
  })

  const btnLoading = ref(false)

  const onSubmit = () => {
    btnLoading.value = true
    add(formState.value).then(() => {
      btnLoading.value = false
      emit('onSuccess')
    })
  }
</script>
